<template>
    <div>
        <!-- 选项卡 -->
        <cmsTitle/>
        <!-- 内容 -->
        <div class="main" :style="{minHeight:type==3?'calc(100vh - 160px)':0}">
            <!-- 头 -->
            <div class="header flex flex-y flex-between">
                <div class="left">内容类型：{{filter_contenType(type)}}</div>
                <div class="flex">
                     <el-button type="primary" size="small" plain v-if="formData.status" @click="handle('down')">下线</el-button>
                     <el-button type="primary" size="small" plain v-else @click="handle('up')">上线</el-button>
                     <el-button type="primary" size="small" plain v-if="type == 3">上移</el-button>
                     <el-button type="primary" size="small" plain v-if="type == 3">下移</el-button>
                     <el-button
                        @click="recomment('off')"
                        type="primary"
                        size="small"
                        plain
                        v-if="formData.recommendFlag && type != 5">取消推荐</el-button>
                     <el-button
                        @click="recomment('up')"
                        type="primary"
                        size="small"
                        plain
                        v-if="!formData.recommendFlag && type != 5">推荐</el-button>
                     <el-button
                        @click="top('off')"
                        type="primary"
                        size="small"
                        plain
                        v-if="formData.recommendFlag && type != 5 && formData.topFlag">取消置顶</el-button>
                     <el-button
                        @click="top('up')"
                        type="primary"
                        size="small"
                        plain
                        v-if="formData.recommendFlag && type != 5 && !formData.topFlag">置顶</el-button>
                     <el-button
                        @click="getZan()"
                        type="primary"
                        size="small"
                        plain>增加点赞数</el-button>
                </div>
            </div>
            <!-- 标题 -->
            <div
                class="flex flex-between title"
                :style="{padding:type == 1||type==5?'15px 0 16px 0':''}"
                :class="{'flex-end':type==1||type==5}">
                <!-- 动态和评论是没有标题的 -->
                <div
                    class="flex left"
                    v-if="type != 1"
                    v-show="type != 5">
                    <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
                    <span
                        class="tagReg right10"
                        v-if="type == 2 || type == 4"
                        v-show="formData.reward">{{formData.reward}}
                    </span>
                    <h3>{{formData.title}}</h3>
                    <el-tag type="info" class="down" size="mini" v-if="!formData.status">已下线</el-tag>
                </div>
                <div class="date">{{common.filter_date(formData.reviewDate)}}</div>
            </div>
            <!-- 头像 -->
            <div class="flex flex-y flex-between headProfile">
                <div class="left flex">
                    <div class="profile">
                        <img :src="formData.headImg?formData.headImg:common.defaultImg">
                    </div>
                    <div class="intro">
                        <div class="flex">
                            <h3>{{formData.realName}}</h3>
                            <el-tag size="mini" v-if="formData.idType">{{formData.idType}}</el-tag>
                        </div>
                        <p>{{formData.introduction}}</p>
                    </div>
                </div>
                <!-- 热度，评论没有热度 -->
                <div class="hot" v-if="type != 5">
                    <div class="flex flex-y top">
                        <img src="@/assets/images/content/icon_hot.png">
                        <span>{{tranNumber(formData.heat)}}</span>
                    </div>
                    <p>热度</p>
                </div>
            </div>
            <!-- 文章专属排版 -->
            <div v-if="type == 3">
                <!-- 图片集 -->
                <imgs :imgs="formData.contentImg" v-if="formData.contentImg.length>0"></imgs>
                <!-- 富文本 -->
                <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
                <el-scrollbar class="content">
                    <div v-html="formData.content"></div>
                </el-scrollbar>
            </div>
            <!-- 非文章 -->
            <div class="else" v-else>
                <!-- 回答会出现乱码 -->
                <div v-if="type == 4">
                    <cmsConvert :data="formData.content"></cmsConvert>
                </div>
                <div v-else>
                    <div>{{formData.content}}</div>
                    <!-- 语音（评论才有） -->
                    <div v-if="type == 5 && formData.voiceUrl">语音</div>
                    <imgs :imgs="formData.contentImg" v-if="formData.contentImg && formData.contentImg.length>0"></imgs>
                </div>
            </div>
            <!-- 收益 -->
            <div class="income flex flex-y" v-if="type == 3">
                <span>收益：</span>
                <i>{{formData.income}}</i>
            </div>
            <!-- 回答来源 -->
            <div class="income" v-if="type == 4">
                <el-button type="text">查看回答来源 ></el-button>
            </div>
            <!-- 评论来源 -->
            <div class="income" v-if="type == 5">
                <el-button type="text">查看评论来源 ></el-button>
            </div>
            <!-- 话题 -->
            <div class="none bottom10" v-if="type==1 && formData.topic">
                <span>话题：</span>
                <span
                    class="right10"
                    v-for="(item,key) in formData.topic"
                    :key="key">#{{item}}#
                </span>
            </div>
            <!-- 标签，评论没有标签 -->
            <div class="flex flex-y tags" v-if="type != 5 && formData.tag">
                <span class="none right10">标签：</span>
                <el-tag
                    class="right10"
                    size="small"
                    effect="plain"
                    type="info"
                    v-for="(item,index) in formData.tag"
                    :key="index">{{item}}
                </el-tag>
            </div>
        </div>
        <div class="main">
            <incomeDetail :id="$route.query.id" :type="$route.query.type"></incomeDetail>
        </div>
        <!-- 下线原因 -->
        <off
            :ifShow="ifOff"
            :formData="formData"
            @httpSuccess="list"
            :type="type">
            <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
        </off>
        <!-- 推荐至 -->
        <recommend
            :ifShow="ifRecommend"
            :formData="formData"
            @httpSuccess="list"
            :type="type">
            <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
        </recommend>
        <!-- 置顶至 -->
        <top
            :ifShow="ifTop"
            :formData="formData"
            @httpSuccess="list"
            :type="type">
            <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
        </top>
    </div>
</template>

<script>
import imgs from './../components/imgs.vue'
import off from '@/components/content/off'
import incomeDetail from './../components/incomeDetail.vue'
import recommend from '@/components/content/recommend'
import top from '@/components/content/top'
export default {
    components:{
        imgs,
        incomeDetail,
        off,
        recommend,
        top
    },
    data () {
        return {
            ///////////////////// 公共 ////////////////////////
            type:"",
            //弹窗
            ifOff:false,
            ifRecommend:false,
            ifTop:false,

            //////////////////// 上半部 //////////////////////
            formData:{
                realName: "",   //账号名称
                introduction: "",//账号简介（签名）
                headImg: "", //头像
                idType: [],//身份类型
                title: "",//标题
                content: "",    //内容
                contentImg: [],
                tag: [],
                reviewDate: "",   //发布时间
                heat: "",//热度
                status: "1",//是否上线(0:下线，1：上线)
                recommendFlag: "",//是否推荐(0:未推荐，1：已推荐)
                topFlag: "",//是否置顶(0:未置顶，1：已置顶)
                income: "",//总收益
            },
        }
    },
    methods:{
        //文章详情
        list:function(){
            //1=动态,2=提问,3=文章,4=回答,5=评论
            let http = '';
            if(this.type == 1){
                http = 'dynamic_detail';
            }
            else if(this.type == 2){
                http = 'ask_detail';
            }
            else if(this.type == 3){
                http = 'article_detail';
            }
            else if(this.type == 4){
                http = 'answer_detail';
            }
            else if(this.type == 5){
                http = 'comment_detail';
            }
            HTTP(http, {
                contentUid:this.$route.query.id
            })
            .then(res=>{
                if(res.code == 200){
                    this.formData = res.data;
                }
            })
        },
        //数字转为中文
        filter_contenType:function(val){
            //1=动态,2=提问,3=文章,4=回答,5=评论
            if(val == 1){
                return '动态'
            }
            else if(val == 2){
                return '提问'
            }
            else if(val == 3){
                return '文章'
            }
            else if(val == 4){
                return '回答'
            }
            else if(val == 5){
                return '评论'
            }
            else{
                return val
            }
        },
        //数字转为万
        tranNumber:function(n) {
            let str = n.toString();
    		if(str.length>=5){
    			return parseInt(n/10000) + 'W';
    		}
    		else{
    			return n
    		}
        },
        //上线，下线
        handle:function(type){
            //下线
            if(type == 'down'){
                this.ifOff = !this.ifOff;
            }
            //上线
            else{
                HTTP('robot_off', {
					contentType:this.type,
					uid:this.$route.query.id,
					status:'0',
					reason:''
				})
				.then(res=>{
					if(res.code == 200){
						this.common.msg('上线成功');
						this.list();
					}
					else{
						this.common.msg(res.msg,'error');
					}
				})
            }
        },
        //推荐
        recomment:function(type){
            if(type == 'off'){
                HTTP('robot_recommend', {
                    contentType:this.type,
                    uid:this.$route.query.id,
                    status:'1' //0推荐成功,1取消推荐
                })
                .then(res=>{
                    if(res.code == 200){
                        this.common.msg('取消推荐成功')
                        this.list();
                    }
                    else{
                        this.common.msg(res.msg,'error');
                    }
                })
            }
            else{
                this.ifRecommend = !this.ifRecommend;
            }
        },
        //置顶
        top:function(type){
            if(type == 'off'){
                HTTP('contentRecommendTop', {
                    contentType:'-1',
                    uid:this.$route.query.id,
                    cancelTop:1, //1=取消首页、热搜置顶,2=取消首页置顶,3=取消热搜取消
                    status:0
                })
                .then(res=>{
                    if(res.code == 200){
                        this.common.msg('取消置顶成功')
                        this.list();
                    }
                    else{
                        this.common.msg(res.msg,'error');
                    }
                })
            }
            else{
                this.ifTop = !this.ifTop;
            }
        },
        //获得点赞数
        getZan:function(){
            HTTP('robot_getZan')
            .then(res=>{
                if(res.code == 200){
                    this.$confirm(`根据参数配置，本次将增加点赞数${res.data.approvals}，增加浏览量${res.data.browses}`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        this.addZan();
                    })
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //增加点赞数
        addZan:function(){
            HTTP('robot_addZan', {
                uid:this.$route.query.id,
                contentType:this.type
            })
            .then(res=>{
                if(res.code == 200){
                    this.common.msg('操作成功');
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
    },
    mounted(){
        this.list();
    },
    created(){
        this.type = this.$route.query.type?this.$route.query.type:'';
    }
}
</script>

<style lang="scss" scoped>
    //滚动条
    /deep/.el-scrollbar__wrap{
        overflow-x: hidden;
    }
    .main {
        padding: 30px 50px;
        background-color: #fff;
        margin-top: 10px;
        min-height: calc(100vh - 160px);
    }
    // 头
    .header{
        .left{
            color: #999;
        }
    }
    //标题
    .title{
        padding: 40px 0 16px 0;
        .left{
            width: calc(100% - 200px);
            .down{
                margin-left: 10px;
                margin-top: 4px;
            }
        }
        .date{
            color: #999;
            font-size: 14px;
            margin-top: 4px;
        }
    }
    //非文章
    .else{
        width: 70%;
        margin: 20px 0;
    }
    //头像
    .headProfile{
        .profile{
            margin-right: 20px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            overflow: hidden;
            img{
                width: 100%;
                min-height: 38px;
            }
        }
        .intro{
            h3{
                font-size: 15px;
                margin-right: 10px;
            }
            p{
                padding-top: 4px;
                font-size: 12px;
                color: #999;
            }
        }
        .hot{
            background-color: #FEF8F4;
            text-align: center;
            padding: 11px 30px;
            border-radius: 3px;
            img{
                height: 10px;
                margin-right: 4px;
            }
            .top{
                color: #E54436;
                font-weight: bold;
            }
            p{
                font-size: 13px;
                color: #999;
            }
        }
    }
    //富文本
    .content{
        padding: 24px 0;
        margin: 20px 0;
        border-top: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        height: 500px;
        img{
            max-width: 100%;
        }
    }
    //收益
    .income{
        margin-bottom: 14px;
        span{
            color: #F67667;
            font-size: 14px;
        }
        i{
            padding: 4px 8px;
            background-color: #F67667;
            color: #fff;
            border-radius: 4px;
            font-size: 13px;
            margin-left: 10px;
        }
    }
    //other
    .tagReg{
        padding: 4px 6px;
        height: 25px;
        background-color: #F67667;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
    }
</style>
